<template>
	<view style="position: relative;">
		<view class="tab">
			<headerNav :navData="navData" @click="tab" />
		</view>
		<view class="center">
			<Entertain v-if="tabs===0"></Entertain>
			<Bonus v-else-if="tabs===2"></Bonus>
			<Financial v-else-if="tabs===1"></Financial>
		</view>
	</view>
</template>

<script>
	import headerNav from "@/components/nav/nav.vue";
	import Entertain from "@/components/supervision/entertain.vue"
	import Bonus from "@/components/supervision/bonus.vue"
	import Financial from "@/components/supervision/financial.vue"
	export default {
		data() {
			return {
				tabs:0,
				navData: [{
					title: "业务招待",
					id: '1'
				}, {
					title: "财务报销",
					id: '2'
				}, {
					title: "工资奖金分配",
					id: '3'
				}],
			}
		},
		components: {
			headerNav,
			Entertain,
			Bonus,
			Financial
		},
		methods: {
			tab(i, id,val){
				this.tabs = i
				console.log(i,'qie')
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .nav .content .text{
		font-size: 30rpx;
	}
.tab{
	width: 750rpx;
	background-color: #FFFFFF;
	padding-top: 30rpx;
	position: fixed;
	top: 0;
	z-index: 999;
}
.center{
	padding: 32rpx;
	box-sizing: border-box;
	margin-top: 100rpx;
}
</style>
